<template>
  <div class="sankey">
    <div id="role" style="width: 500px; height: 1000px; position: absolute">
      <div
        style="width: 400px; height: 350px; overflow: hidden; margin-left: 25px"
      >
        <div
          style="text-align: center; margin-top: 100px; font-size: 35px"
          class="person-font"
        >
          文情墨韵-{{ role }}
        </div>
        <div style="text-align: center; margin-top: 30px" class="custom-font">
          &nbsp;&nbsp;{{ description }}...
        </div>
      </div>
      <div
        id="scatterChart"
        style="width: 400px; height: 300px; margin-left: 25px; margin-top: 15px"
      ></div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import moment from "moment";
import { color } from "mockjs/src/mock/random/color";
import loadJs from "@/utily/loadjs";
import Chart from "@/utily/chart";
import * as echarts from "echarts";

export default {
  name: "work",
  data() {
    return {
      emotions: [
        [0, 0, 3],
        [0, 1, 3],
        [0, 2, 5],
        [0, 3, 3],
        [0, 4, 3],
        [0, 5, 5],
        [0, 6, 3],
        [0, 7, 5],
        [0, 8, 3],
        [0, 9, 3],
        [1, 0, 3],
        [1, 1, 3],
        [1, 2, 3],
        [1, 3, 4],
        [1, 4, 3],
        [1, 5, 3],
        [1, 6, 4],
        [1, 7, 3],
        [1, 8, 4],
        [1, 9, 3],
        [2, 0, 3],
        [2, 1, 3],
        [2, 2, 6],
        [2, 3, 3],
        [2, 4, 6],
        [2, 5, 6],
        [2, 6, 3],
        [2, 7, 6],
        [2, 8, 3],
        [2, 9, 6],
        [3, 0, 3],
        [3, 1, 4],
        [3, 2, 6],
        [3, 3, 4],
        [3, 4, 4],
        [3, 5, 4],
        [3, 6, 4],
        [3, 7, 4],
        [3, 8, 4],
        [3, 9, 4],
        [4, 0, 6],
        [4, 1, 4],
        [4, 2, 3],
        [4, 3, 6],
        [4, 4, 3],
        [4, 5, 3],
        [4, 6, 6],
        [4, 7, 3],
        [4, 8, 6],
        [4, 9, 3],
        [5, 0, 2],
        [5, 1, 3],
        [5, 2, 4],
        [5, 3, 3],
        [5, 4, 4],
        [5, 5, 4],
        [5, 6, 3],
        [5, 7, 4],
        [5, 8, 3],
        [5, 9, 4],
        [6, 0, 2],
        [6, 1, 3],
        [6, 2, 5],
        [6, 3, 3],
        [6, 4, 5],
        [6, 5, 5],
        [6, 6, 3],
        [6, 7, 5],
        [6, 8, 3],
        [6, 9, 5],
      ],
      dynasties: [
        "东吴",
        "东晋",
        "晋",
        "南朝",
        "唐",
        "南唐",
        "宋",
        "元",
        "明",
        "清",
        "现当代",
      ],
      dynasty: "东吴",
      data: [],
      roles: ["杨泉", "唐僧会", "程秉"],
      role: "杨泉",
      descriptions: {
        杨泉: "气一元论思想早在西周已经产生，杨泉进一步坚持了和发展了气一元论，这是与当时玄学家们所宣扬的“天地万物皆以无为本”的“贵无论”根本对立的。他曾十分藐视地说：“夫虚无之谈，尚其华藻，无异春蛙秋蝉，聒耳而已。”（《物理论》）杨泉坚持气一元论，推进了当时与魏晋玄学相对立的唯物主义思潮。",
        唐僧会:
          "“明解三藏，博览六经，天文图纬，多所综涉”。相传曾作泥洹呗声，清靡哀亮，为一代模式。曾译出《阿难念弥(陀)经》、《镜面王经》、《察微王经》、《六度集经》等，又注《安般守意》、《法镜》、《道树》等三经。其佛学思想主要表现在两个方面：一是将大乘六度的菩萨行同儒家仁政学说相结合，改造成为佛家的“仁道”理论，以之为改良现实社会和国家的指导原则；二是继承安世高所传的禅数学，推动了“安般”禅的发展。其学养生成神，与道教接近。并以儒家仁义说作为佛教最高原则，认为儒典之格言就是佛教之明训，开融合佛儒之先河。编有《吴品》，曾集《六度要目》，制《泥洹梵呗》。所译佛经以《六度集经》为代表。",
        程秉: "程秉曾跟从郑玄（东汉末年的经学大师）研究经学，后因躲避战乱，又在交州（越南北部、广西一部分）生活过一段时间，与经学家、训诂学家刘熙探讨过经学大义，能“博通五经”。交趾（越南）太守、督岭南七郡的士燮（经学大师），聘用他为“长史”（太守的属官）。孙权听说程秉是当代名儒，也备上厚礼，聘请他担任太子孙登的老师，担任太子太傅。",
      },
      description:
        "气一元论思想早在西周已经产生，杨泉进一步坚持了和发展了气一元论，这是与当时玄学家们所宣扬的“天地万物皆以无为本”的“贵无论”根本对立的。他曾十分藐视地说：“夫虚无之谈，尚其华藻，无异春蛙秋蝉，聒耳而已。”（《物理论》）杨泉坚持气一元论，推进了当时与魏晋玄学相对立的唯物主义思潮",
    };
  },
  methods: {
    draw() {
      let that = this;
      // 节点和连接数据
      d3.json("datasets/sankey.json").then(function (data) {
        // 定义情感值和对应颜色的映射关系
        var emotions = ["喜", "怒", "哀", "惧", "欲", "爱", "恶"];
        var colors = [
          "#3D646E",
          "#638083",
          "#93A49E",
          "#ECE3C1",
          "#E7C59D",
          "#DAA36C",
          "#D7955B",
        ];
        // 创建一个序数比例尺
        var colorScale = d3.scaleOrdinal().domain(emotions).range(colors);
        console.log(that.dynasty);
        var roles = that.workEmotions[that.dynasty].roles;
        var roleColors = ["#C69480", "#73747E", "#48685B"];
        // 创建一个序数比例尺
        var roleColorScale = d3.scaleOrdinal().domain(roles).range(roleColors);

        /* ----------------------------配置参数------------------------  */
        const chart = new Chart();
        const config = {
          margins: { top: 80, left: 50, bottom: 100, right: 50 },
          textColor: "white",
          title: "",
          normalStrokeOpacity: "0.3",
        };

        chart.margins(config.margins);

        chart.width(1000);
        chart.height(800);

        /* ----------------------------数据转换------------------------  */
        var tempNodes = [
          {
            x0: 0,
            x1: 50,
            y0: 213.10793569907307,
            y1: 266.60387065842264,
          },
          {
            x0: 0,
            x1: 50,
            y0: 281.60387065842264,
            y1: 333.1892365120811,
          },
          {
            x0: 0,
            x1: 50,
            y0: 348.1892365120811,
            y1: 401.6851714714307,
          },
        ];
        const sankey = d3
          .sankey()
          .nodeWidth(50)
          .nodePadding(15)
          .size([chart.getBodyWidth(), chart.getBodyHeight()])
          .nodeId((d) => d.id);
        for (var i = 18; i <= 20; i++) {
          data.nodes[i].id = roles[i - 18];
        }
        for (var i = 0; i < 21; i++) {
          data.links[i].source = roles[Math.floor(i / 7)];
          data.links[i].value =
            that.workEmotions[that.dynasty]["role_emotions"][Math.floor(i / 7)][
              i % 7
            ];
        }
        const { nodes, links } = sankey({
          nodes: data.nodes,
          links: data.links,
        });
        //测试得到的nodes和links
        // console.log(nodes);
        // console.log(links);
        // 过滤掉指定的id
        const roleNodes = nodes.filter((node) => {
          const excludedIds = [
            "东吴",
            "东晋",
            "晋",
            "南朝",
            "唐",
            "南唐",
            "宋",
            "元",
            "明",
            "清",
            "现当代",
            "欲",
            "恶",
            "爱",
            "惧",
            "哀",
            "怒",
            "喜",
          ];
          return !excludedIds.includes(node.id);
        });
        console.log(roleNodes);
        const otherNodes = nodes.filter((node) => {
          const excludedIds = [
            "东吴",
            "东晋",
            "晋",
            "南朝",
            "唐",
            "南唐",
            "宋",
            "元",
            "明",
            "清",
            "现当代",
            "欲",
            "恶",
            "爱",
            "惧",
            "哀",
            "怒",
            "喜",
          ];
          return excludedIds.includes(node.id);
        });
        console.log(otherNodes);
        var tempLinks = [
          96.54289504866654, 92.72175683728443, 94.63232594297548,
          78.39248854460152, 65.97378935760966, 89.85590317874784,
          107.05102512996734, 313.1282609023251, 306.44126903240647,
          310.2624072437886, 293.067285292569, 282.55915521126815,
          303.5754153738698, 323.636390983626, 531.6241958616747,
          523.0266348860649, 527.8030576502925, 509.65265114622747,
          499.1445210649266, 520.1607812275283, 542.1323259429755,
        ];

        for (var i = 0; i < 21; i++) {
          links[i].y0 = tempLinks[i];
        }
        // for (var i = 0; i < 7; i++) {
        //   links[i].y0 -= 150;
        // }

        // for (var i = 14; i < 21; i++) {
        //   links[i].y0 += 150;
        // }

        // var jsonStr = JSON.stringify(tempLinks);
        // var blob = new Blob([jsonStr], { type: "application/json" });
        // var url = URL.createObjectURL(blob);
        // var link = document.createElement("a");
        // link.href = url;
        // link.download = "tempLinks.json";
        // link.click();

        // links[0].y0 = 109;
        /* ----------------------------渲染节点------------------------  */
        chart.renderNodes = function () {
          // 定义滤镜效果
          var filter = d3
            .select("svg")
            .append("defs")
            .append("filter")
            .attr("id", "blur-filter")
            .append("feGaussianBlur")
            .attr("stdDeviation", 2.5); // 高斯模糊
          // const rects = chart
          //   .body()
          //   .append("g")
          //   .attr("class", "rects")
          //   .selectAll(".node")
          //   .data(roleNodes);
          // rects
          //   .enter()
          //   .append("g")
          //   .attr("class", "node")
          //   .attr("index", (d) => d.id)
          //   .attr("linkNodes", (d) => {
          //     const nextNodes = d.sourceLinks
          //       .map((link) => link.target.id)
          //       .join("");
          //     const prevNodes = d.targetLinks
          //       .map((link) => link.source.id)
          //       .join("");
          //     return nextNodes + d.id + prevNodes;
          //   })
          //   .append("rect")
          //   .merge(rects)
          //   .attr("x", (d) => d.x0)
          //   .attr("y", (d, index) => {
          //     var bias = 0;
          //     if (index == 0) {
          //       bias = -150;
          //     }
          //     if (index == 2) {
          //       bias = +150;
          //     }
          //     return d.y0 + bias;
          //   })
          //   .attr("width", (d) => d.x1 - d.x0)
          //   .attr("height", (d) => d.y1 - d.y0)
          //   .attr("fill", (d) => chart._colors(d.index % 10));

          // rects.exit().remove();

          const rects1 = chart
            .body()
            .append("g")
            .attr("class", "rects")
            .selectAll(".node")
            .data(otherNodes);
          rects1
            .enter()
            .append("g")
            .attr("class", "node")
            .attr("index", (d) => d.id)
            .attr("linkNodes", (d) => {
              const nextNodes = d.sourceLinks
                .map((link) => link.target.id)
                .join("");
              const prevNodes = d.targetLinks
                .map((link) => link.source.id)
                .join("");
              return nextNodes + d.id + prevNodes;
            })
            .append("rect")
            .merge(rects1)
            .attr("x", (d, index) => d.x0)
            .attr("y", (d) => d.y0)
            .attr("width", (d) => d.x1 - d.x0)
            .attr("height", (d) => d.y1 - d.y0)
            .attr("fill", (d, index) => {
              if (!emotions.includes(d.id)) {
                return colorScale(index % 3);
              }
              return colorScale(d.id);
            })
            .attr("fill-opacity", "0.75")
            .attr("filter", "url(#blur-filter)"); // 应用滤镜;

          rects1.exit().remove();
        };

        /* ----------------------------渲染连线------------------------  */
        chart.renderLines = function () {
          const lines = chart
            .body()
            .append("g")
            .attr("class", "lines")
            .selectAll("path")
            .data(links);

          lines
            .enter()
            .append("path")
            .merge(lines)
            .attr("linkNodes", (d) => {
              return d.source.id + "-" + d.target.id;
            })
            .attr("d", d3.sankeyLinkHorizontal())
            .attr("stroke", (d, index) => {
              if (roles.includes(d.source.id)) {
                return roleColorScale(d.source.id);
              } else if (emotions.includes(d.source.id)) {
                return roleColorScale(d.source.id);
              }

              return emotions.includes(d.source.id)
                ? colorScale(d.source.id)
                : emotions.includes(d.target.id)
                ? colorScale(d.target.id)
                : "white";
            })
            .attr("stroke-width", (d) => {
              return d.width;
            })
            .attr("stroke-opacity", config.normalStrokeOpacity)
            .attr("fill", "none");

          lines.exit().remove();
        };

        /* ----------------------------渲染文本标签------------------------  */
        chart.renderTexts = function () {
          d3.selectAll(".text").remove();

          chart
            .body()
            .selectAll(".node")
            .append("text")
            .attr("class", "text")
            .attr("x", (d) => (d.x0 + d.x1) / 2)
            .attr("y", (d) => {
              if (d.id == roleNodes[0].id) return (d.y0 + d.y1) / 2 - 150;
              if (d.id == roleNodes[2].id) return (d.y0 + d.y1) / 2 + 150;
              return (d.y0 + d.y1) / 2;
            })
            // .attr("stroke", config.textColor)
            .attr("text-anchor", "middle")
            .attr("dy", 6)
            .text((d) => d.id)
            .attr("fill", "white")
            .style("font-family", "Lobster, cursive"); // 设置文本颜色为白色;
        };

        /* ----------------------------渲染图标题------------------------  */
        chart.renderTitle = function () {
          chart
            .svg()
            .append("text")
            .classed("title", true)
            .attr("x", chart.width() / 2)
            .attr("y", 0)
            .attr("dy", "2em")
            .text(config.title)
            .attr("fill", config.textColor)
            .attr("text-anchor", "middle")
            .attr("stroke", config.textColor);
        };

        /* ----------------------------绑定鼠标交互事件------------------------  */
        chart.addMouseOn = function () {
          // 悬停在节点上
          d3.selectAll(".node")
            .on("mouseover", function (d) {
              d3.selectAll(".node, path[linkNodes]")
                .attr("fill-opacity", "0.1")
                .attr("stroke-opacity", "0.1");

              d3.selectAll("[linkNodes*=" + d.id + "]")
                .attr("fill-opacity", "1")
                .attr("stroke-opacity", config.normalStrokeOpacity);
            })
            .on("mouseleave", function () {
              d3.selectAll(".node, path")
                .attr("fill-opacity", "1")
                .attr("stroke-opacity", config.normalStrokeOpacity);
            });

          // 悬停在连线上
          d3.selectAll("path")
            .on("mouseover", function () {
              d3.selectAll(".node, path[linkNodes]")
                .attr("fill-opacity", "0.1")
                .attr("stroke-opacity", "0.1");

              const e = d3.event;
              const hoverNodes = d3
                .select(e.target)
                .attr("stroke-opacity", config.normalStrokeOpacity)
                .attr("linkNodes")
                .split("-");

              hoverNodes.forEach((id) => {
                d3.selectAll("[index=" + id + "]").attr("fill-opacity", "1");
              });
            })
            .on("mouseleave", function () {
              d3.selectAll(".node, path[linkNodes]")
                .attr("fill-opacity", "1")
                .attr("stroke-opacity", config.normalStrokeOpacity);
            });
        };

        chart.render = function () {
          chart.renderTitle();

          chart.renderNodes();

          chart.renderLines();

          chart.renderTexts();

          chart.addMouseOn();
        };
        chart.renderChart(".sankey");
        /* ----------------------------渲染人物/作品------------------------  */
        d3.select("svg")
          .style("margin", "0")
          .style("left", "400px")
          .attr("width", "1100");

        d3.select(".body").attr(
          "transform",
          "translate(" + 150 + "," + 80 + ")"
        );

        console.log(roleNodes);
        for (var i = 0; i < 3; i++) {
          roleNodes[i].x0 = tempNodes[i].x0;
          roleNodes[i].x1 = tempNodes[i].x1;
          roleNodes[i].y0 = tempNodes[i].y0;
          roleNodes[i].y1 = tempNodes[i].y1;
        }
        const divs = d3.select("svg").selectAll(".role-image").data(roleNodes);
        divs
          .enter()
          .append("circle")
          .attr("name", function (d) {
            return d.id;
          })
          .attr("class", "role-image")
          .attr("r", "45")
          .attr("cx", function (d, index) {
            return (d.x0 + d.x1) / 2 + 120;
          })
          .attr("cy", function (d, index) {
            if (index == 0) {
              return (d.y0 + d.y1) / 2 - 70;
            }
            if (index == 2) {
              return (d.y0 + d.y1) / 2 + 230;
            }
            return (d.y0 + d.y1) / 2 + 80;
          })
          .style("fill", function (d) {
            // 图片路径
            const imageUrl = "/assets/" + d.id + ".jpeg";

            // 定义图案
            const pattern = d3
              .select("svg")
              .append("pattern")
              .attr("id", "image-pattern" + d.id)
              .attr("patternUnits", "objectBoundingBox")
              .attr("width", 1)
              .attr("height", 1);

            // 添加图像到图案
            pattern
              .append("image")
              .attr("href", imageUrl)
              .attr("x", 0)
              .attr("y", 0)
              .attr("width", 90) // 图片宽度
              .attr("height", 90); // 图片高度

            // 返回图案引用作为填充属性
            return "url(#image-pattern" + d.id + ")";
          });

        divs
          .enter()
          .append("circle")
          .attr("class", "role-image")
          .attr("name", function (d) {
            return d.id;
          })
          .attr("r", "25")
          .attr("cx", function (d, index) {
            return (d.x0 + d.x1) / 2 + 70;
          })
          .attr("cy", function (d, index) {
            if (index == 0) {
              return (d.y0 + d.y1) / 2 - 70;
            }
            if (index == 2) {
              return (d.y0 + d.y1) / 2 + 230;
            }
            return (d.y0 + d.y1) / 2 + 80;
          })
          .attr("fill", "#F7F1DF");

        divs
          .enter()
          .append("text")
          .attr("class", "role-font")
          .attr("x", function (d, index) {
            return (d.x0 + d.x1) / 2 + 70;
          })
          .attr("y", function (d, index) {
            if (index == 0) {
              return (d.y0 + d.y1) / 2 - 70 + 2.5;
            }
            if (index == 2) {
              return (d.y0 + d.y1) / 2 + 232.5;
            }
            return (d.y0 + d.y1) / 2 + 80 + 2.5;
          })
          .attr("text-anchor", "middle")
          .attr("alignment-baseline", "middle")
          .text(function (d) {
            return d.id[0];
          })
          .style("font-family", "Lobster, cursive")
          .style("font-size", "22.5px"); // 设置字体样式;

        // 悬停在人物上
        d3.selectAll(".role-image")
          .on("mouseover", function () {
            var name = d3.select(this).attr("name");
            that.role = name;

            that.description = that.workEmotions[that.dynasty]["descriptions"][
              name
            ].substring(0, 150);
            that.roles = that.workEmotions[that.dynasty].roles;
            that.myChart.dispose();
            that.emotions =
              that.workEmotions[that.dynasty]["emotions"][
                that.roles.indexOf(name)
              ];

            that.drawScatterChart();
          })
          .on("mouseleave", function () {});

        // 点击朝代
        d3.selectAll(".node")
          .filter((d, i) => {
            return that.dynasties.includes(d.id);
          })
          .on("click", function (d) {
            d3.selectAll(".sankey > div:not(#role)").remove();
            var removedDiv = d3.select("#role");
            // Remove the div from the DOM
            removedDiv.remove();

            that.dynasty = d.id;
            that.draw();
            // Restore the div by reinserting it at the desired position
            var targetContainer = d3.select(".sankey");
            setTimeout(() => {
              targetContainer.node().appendChild(removedDiv.node());
            }, 1000);
          });

        // #3D646E
        // #638083
        // #93A49E
        // #ECE3C1
        // #E7C59D
        // #DAA36C
        // #D7955B
        that.drawDiscreteArc(
          10,
          (roleNodes[0].x0 + roleNodes[0].x1) / 2 - 30 + 100,
          (roleNodes[0].y0 + roleNodes[0].y1) / 2 - 150,
          "x",
          "#C69480"
        );
        console.log("第一个人物已经绘制完成");
        that.drawDiscreteArc(
          10,
          (roleNodes[1].x0 + roleNodes[1].x1) / 2 - 30 + 100,
          (roleNodes[1].y0 + roleNodes[1].y1) / 2,
          "x",
          "#73747E"
        );
        console.log("第二个人物已经绘制完成");
        that.drawDiscreteArc(
          10,
          (roleNodes[2].x0 + roleNodes[2].x1) / 2 - 30 + 100,
          (roleNodes[2].y0 + roleNodes[2].y1) / 2 + 150,
          "x",
          "#48685B"
        );
        console.log("第三个人物已经绘制完成");
      });
    },
    drawArc(
      x,
      y,
      className,
      startAngle,
      endAngle,
      innerRadius,
      outerRadius,
      colorWork,
      opacityWork
    ) {
      x = x + 50;
      y = y + 80;
      var arcGenerator = d3
        .arc()
        .innerRadius(innerRadius)
        .outerRadius(outerRadius)
        .startAngle(startAngle);

      var picture = d3
        .select("svg")
        .append("g")
        .attr("transform", "translate(" + x + "," + y + ")")
        .attr("class", className);

      var upperGround = picture
        .append("path")
        .datum({ endAngle: endAngle })
        .style("fill", colorWork)
        .attr("d", arcGenerator)
        .attr("fill-opacity", opacityWork);
    },
    drawDiscreteArc(len, x, y, className, colorWork) {
      var length = len;
      for (var i = 0; i < length; i++) {
        var bias = (2 * Math.PI * 0.45) / length;
        var gap = (2 * Math.PI * 0.05) / length;
        var opacity_bias = 0.7 / length;
        this.drawArc(
          x,
          y,
          "work",
          0 + i * (bias + gap),
          0 + (i + 1) * (bias + gap) - gap,
          50,
          65,
          colorWork,
          1
        );
      }

      this.drawArc(
        x,
        y,
        "work-border",
        0 + Math.PI * (1.5 + 0.15),
        0 + Math.PI * 2,
        56,
        59
      );

      this.drawArc(
        x,
        y,
        "work-border",
        0 + Math.PI,
        0 + Math.PI * (1.5 - 0.15),
        56,
        59
      );

      // 悬停在节点上
      d3.selectAll(".node")
        .on("mouseover", function (d) {
          d3.select(this) // 使用select(this)选择当前元素
            .attr("fill-opacity", "0.1")
            .attr("stroke-opacity", "0.1");
        })
        .on("mouseleave", function () {
          d3.select(this) // 使用select(this)选择当前元素
            .attr("fill-opacity", "1")
            .attr("stroke-opacity", "0.4");
        });
    },
    drawScatterChart() {
      var chartDom = document.getElementById("scatterChart");

      var myChart = echarts.init(chartDom);
      this.myChart = myChart;
      var option;

      // prettier-ignore
      const hours = [
    '1', '2', '3', '4', '5', '6', '7',
    '8', '9', '10',
];
      // prettier-ignore
      const days = [
    '喜', '怒', '哀',
    '惧', '爱', '恶', '欲'
];
      // prettier-ignore
      const data = this.emotions;
      const title = [];
      const singleAxis = [];
      const series = [];
      days.forEach(function (day, idx) {
        title.push({
          textBaseline: "middle",
          top: ((idx + 0.5) * 100) / 7 + "%",
          text: day,
        });
        singleAxis.push({
          left: 50, //控制左右侧图表的间距
          type: "category",
          boundaryGap: false,
          data: hours,
          top: (idx * 100) / 7 + 5 + "%",
          height: 100 / 7 - 10 + "%",
          axisLabel: {
            interval: 1,
            show: false,
          },
          axisTick: {
            show: false, // 不显示坐标轴刻度
          },
          // axisLine: {
          //   show: false, // 不显示坐标轴线
          // },
        });
        series.push({
          singleAxisIndex: idx,
          coordinateSystem: "singleAxis",
          type: "scatter",
          data: [],
          symbolSize: function (dataItem) {
            return dataItem[1] * 4;
          },
        });
      });
      data.forEach(function (dataItem) {
        series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
      });
      option = {
        color: [
          "#3D646E",
          "#638083",
          "#93A49E",
          "#ECE3C1",
          "#E7C59D",
          "#DAA36C",
          "#D7955B",
        ],
        tooltip: {
          position: "top",
        },
        // title: title,
        singleAxis: singleAxis,
        series: series,
      };

      option && myChart.setOption(option);

      const svg = d3
        .select("#scatterChart") // 选择id为"scatterChart"的div元素
        .append("svg") // 在选择的div元素中添加一个svg元素
        .attr("id", "xxx")
        .attr("width", 400) // 设置svg元素的宽度
        .attr("height", 300); // 设置svg元素的高度

      // svg
      //   .append("rect") // 在svg元素中添加一个矩形元素
      //   .attr("x", 0) // 设置矩形的x坐标
      //   .attr("y", 0) // 设置矩形的y坐标
      //   .attr("width", 20) // 设置矩形的宽度
      //   .attr("height", 300) // 设置矩形的高度
      //   .attr("rx", 10) // 设置圆角半径，水平方向
      //   .attr("ry", 10) // 设置圆角半径，垂直方向
      //   .style("fill", "#ECE3C1") // 设置矩形的填充颜色
      //   .style("opacity", 1); // 设置透明度为0.5
    },
  },
  computed: {
    ...mapState({
      data1: (state) => state.datas,
    }),
  },
  mounted() {
    /*  loadJs('https://unpkg.com/d3-sankey@0.12.3/dist/d3-sankey.min.js').then(()=>{
      // 加载成功，进行后续操作
      console.log("xxxx")
      this.draw();
    })*/
    d3.json("datasets/work_emotions.json")
      .then((data) => {
        this.workEmotions = data; // 将返回的JSON数据赋值给jsonData变量
        this.draw();
        setTimeout(() => {
          console.log(this.emotions);
          this.drawScatterChart();
        }, 500);
      })
      .catch((error) => {
        console.error("Failed to load JSON data:", error);
      });
  },
};
</script>

<style scoped>
svg {
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
text {
  dominant-baseline: middle;
  font-family: "Open Sans", sans-serif;
  /* fill: #333; */
}
line {
  stroke-linecap: round;
}
.time {
  font-size: 20px;
}
.origin-dest-line {
  stroke: #79b5a2;
  stroke-width: 4;
}
.origin-text,
.dest-text {
  font-size: 14px;
}
.origin-dot,
.dest-dot {
  fill: #79b5a2;
}
.flight-dot {
  stroke: #fff;
  stroke-width: 2;
}
.flight-line {
  stroke-width: 2;
}
.flight text {
  font-size: 14px;
}

.sankey {
  background-image: url("@/assets/背景图.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 1500px;
  height: 750px;
}

.custom-font {
  /* font-family: "Edwardian Script ITC", cursive; */
  font-family: Lobster, cursive;
  /* font-family: "方正博雅宋简体", "SimSun", serif; */
  /* font-family: "汉仪旗黑-35S", "Microsoft YaHei", sans-serif; */
  /* font-family: "华文行楷", "STXingkai", serif; */
  /* font-family: "书体坊颜楷体", "STKaiti", serif; */
}

.person-font {
  /* font-family: "Edwardian Script ITC", cursive; */
  /* font-family: Lobster, cursive; */
  /* font-family: "方正博雅宋简体", "SimSun", serif; */
  /* font-family: "汉仪旗黑-35S", "Microsoft YaHei", sans-serif; */
  font-family: "华文行楷", "STXingkai", serif;
  /* font-family: "书体坊颜楷体", "STKaiti", serif; */
}
</style>
